<template>
	<view class="container">
		<view class="ui-all">
			<view class="ui-list">
				<text>{{ $t('pages.sys.profile.scanActionText') }}</text>
				<textarea v-model="scanInfoDto.ScanAction" placeholder-class="place" :placeholder="$t('pages.sys.profile.scanActionPlaceholder')"></textarea>
			</view>
			<view class="ui-list">
				<text>{{ $t('pages.sys.profile.scanDataText') }}</text>
				<textarea v-model="scanInfoDto.ScanData" placeholder-class="place" :placeholder="$t('pages.sys.profile.scanDataPlaceholder')"></textarea>
			</view>
			
			<button class="button-submit" type="primary" @click="handleSubmit">{{ $t('common.saveText') }}</button>
			<button class="button-submit" type="primary" style="background: #18BC37;" @click="handleScanStart">{{ $t('pages.sys.profile.scanStartText') }}</button>
			<button class="button-submit" type="warn" @click="handleScanStop">{{ $t('pages.sys.profile.scanStopText') }}</button>
		</view>
		
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
		
		<view style="margin-top: 80rpx;" />
	</view>
</template>

<script>
	import { useScan } from "@/utils/scan-code";
	const { scan } = useScan();
	export default {
		data() {
			return {
				scanInfoDto: {
					ScanAction: '',
					ScanData: '',
				},
				msgType: '',
				messageText: '',
			}
		},
		async onShow() {
			const that = this;
			// 导航栏多语言
			uni.setNavigationBarTitle({
				title: that.$t('pages.sys.profile.scanSetupText')
			});
			// 设置扫描信息
			that.scanInfoDto.ScanAction = scan.getScanActionInfo();
			that.scanInfoDto.ScanData = scan.getScanDataInfo();
		},
		destroyed: function(){
			// uni.showModal({
			//     title: 'destroyed',
			//     content: '停止监听扫描'
			// });
			// 页面退出时一定要停止监听扫描,否则监听将一直有效
			scan.stop();
		},
		methods: {
			/** 处理提交 */
			handleSubmit() {
				const that = this;
				try {
					uni.showLoading({
						title: that.$t('common.loadingText'),
						mask: true
					});
					
					scan.setScanActionInfo(that.scanInfoDto.ScanAction);
					scan.setScanDataInfo(that.scanInfoDto.ScanData);
					
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: that.$t('common.successText'),
						mask: true
					});
					
					// setTimeout(function () {
					//     uni.navigateBack();
					// }, 1500);
				}
				catch(err) {} 
				finally {
					uni.hideLoading();
				}
			},
			/** 处理扫描开启 */
			handleScanStart() {
				const that = this;
				scan.start((res) => {
					// console.log('扫描结果', res);
					uni.showModal({
					    title: that.$t('scanCode.scanResult'),
					    content: JSON.stringify(res.data),
						showCancel: false,
						confirmText: that.$t('common.okText')
					});
				});
				
				uni.showToast({
					icon: 'success',
					title: that.$t('common.successText'),
					mask: true
				});
			},
			/** 处理扫描停止 */
			handleScanStop() {
				const that = this;
				
				scan.stop();
				
				uni.showToast({
					icon: 'success',
					title: that.$t('common.successText'),
					mask: true
				});
			}
		}
	}
</script>

<style lang="less">
	page {
		display: flex !important;
		align-items: center !important;  
		flex-direction: column !important;
		justify-content: center !important;
		background-color: #fff !important;
	}
	
	.container {
		width: 100vw;
	}

	.ui-all {
		padding: 20rpx 40rpx;

		.ui-list {
			width: 100%;
			// text-align: left;
			// height: 140rpx;
			padding: 20rpx 0;
			border-bottom: 1px solid rgb(243,243,243);
			display: flex;
			align-items: center;
			
			text {
				display: inline-block;
				// vertical-align: middle;
				color: #4a4a4a;
				font-size: 28rpx;
				// margin-left: 40rpx;
				min-width: 150rpx;
			}
			input {
				// color: #030303;
				font-size: 30rpx;
				display: inline-block;
				// vertical-align: middle;
			}
			button{
				// color: #030303;
				font-size: 30rpx;
				display: inline-block;
				// vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;
				&::after{
					display: none;
				}
			}
			picker {
				width: 100%;
				// color: #030303;
				font-size: 30rpx;
				display: inline-block;
				// vertical-align: middle;
			}
			textarea {
				// color: #030303;
				font-size: 30rpx;
				// vertical-align: middle;
				height: 150rpx;
				width: 100%;
				// margin-top: 50rpx;
			}
			
			.place {
				// color: #999999;
				font-size: 28rpx;
			}
			.to {
				flex-shrink: 0;
				// vertical-align: middle;
				width: 40upx;
				height: 40upx;
			}
		}
		.ui-list:active {
		    background-color: #f8f8f8;
		}

		.button-submit {
			font-size: 35rpx;
			width: 500rpx;
			height: 100rpx;
			border-radius: 50rpx;
			line-height: 100rpx;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			margin-top: 35rpx;
		}
	}
</style>
